.w-flex {
  display: flex;
  flex: 1 1 auto;

  &.row {
    flex-direction: row;
  }
  &.column {
    flex-direction: column;
  }
  &.wrap {
    flex-wrap: wrap;
  }
  &.basis-zero > * {
    flex-basis: 0;
    flex-grow: 1;
  }

  @for $i from 1 through 12 {
    // Divide by 2 as there are 2 elements having this space.
    $space: round($base-increment * $i / 2);
    &--gap#{$i} {
      margin: -$space;
    }
    &--gap#{$i} > * {
      margin: $space;
    }
  }
}
